<template>
	<view class="container">
		<view class="editPhone_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" :background-color="transparentColor" status-bar title="信息修改" dark style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 主体内容区域 -->
		<view class="editPhone_contain">
			<view class="editPhone_contain_main">
				<!-- 输入手机号区域 -->
				<view class="editPhone_contain_main_phone_out">
					<view class="editPhone_contain_main_phone">
						<view class="editPhone_contain_main_phone_icon">
							<img src="/static/手机号@2x.png" />
						</view>
						<view class="editPhone_contain_main_phone_input">
							<input type="text" placeholder="请输入手机号码" placeholder-style="font-size: 20rpx;color: #CCCCCC"/>
						</view>
						<view class="editPhone_contain_main_phone_cancle">
							<img src="/static/组 5@3x.png" />
						</view>
					</view>
				</view>
				<!-- 验证码区域 -->
				<view class="editPhone_contain_main_authCode_out">
					<view class="editPhone_contain_main_authCode">
						<view class="editPhone_contain_main_authCode_icon">
							<img src="/static/验证码@3x.png" />
						</view>
						<view class="editPhone_contain_main_authCode_input">
							<input type="text" placeholder="请输入验证码" placeholder-style="font-size: 20rpx;color: #CCCCCC"/>
						</view>
					</view>
					<view class="editPhone_contain_main_authCode_button">
						获取验证码
					</view>
				</view>
				<!-- 提交按钮 -->
				<view class="editPhone_contain_main_submint">
					<navigator url="/pacakgeMy/pages/myInfo/myInfo" class="editPhone_contain_main_submint_button">
						提交
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				// 初始化 value 数据
				value: ''
			}
		},
		methods: {
			iconClick() {
			    console.log('图标被点击');
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
/* 顶部导航栏区域开始 */
.editPhone_header {
	height: 300rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}
/* 顶部导航栏区域结束 */

/* 主体信息区域开始 */
.editPhone_contain {
	padding: 0 20rpx;
	position: relative;
	top: -160rpx;
}
.editPhone_contain_main {
	background-color: #fff;
	border-radius: 26rpx;
	padding: 40rpx 30rpx 60rpx;
}
/* 手机号区域开始 */
.editPhone_contain_main_phone_out {
	padding: 20rpx 0;
}
.editPhone_contain_main_phone,.editPhone_contain_main_authCode {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #F2F2F2;
	border-radius: 44rpx;
	display: flex;
	position: relative;
}
.editPhone_contain_main_phone_icon,.editPhone_contain_main_authCode_icon {
	width: 50rpx;
	height: 54rpx;
	text-align: center;
	position: absolute;
	top: 16rpx;
	left: 40rpx;
}
.editPhone_contain_main_phone_icon>img,.editPhone_contain_main_authCode_icon>img {
	width: 36rpx;
	height: 50rpx;
}
.editPhone_contain_main_phone_input,.editPhone_contain_main_authCode_input {
	height: 90rpx;
	line-height: 90rpx;
	margin-left: 110rpx;
}
.editPhone_contain_main_phone_input>input,.editPhone_contain_main_authCode_input>input {
	height: 88rpx;
	line-height: 88rpx;
}
.editPhone_contain_main_phone_cancle {
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	position: absolute;
	top: 12rpx;
	right: 30rpx;
}
.editPhone_contain_main_phone_cancle>img {
	width: 44rpx;
	height: 44rpx;
	margin-top: -4rpx;
}
/* 手机号区域结束 */
/* 验证码区域开始 */
.editPhone_contain_main_authCode_out {
	padding:30rpx 0;
	display: flex;
	justify-content: space-between;
}
.editPhone_contain_main_authCode {
	width: 440rpx;
}
.editPhone_contain_main_authCode_icon {
	width: 50rpx;
	height: 54rpx;
	text-align: center;
	position: absolute;
	top: 12rpx;
	left: 40rpx;
}
.editPhone_contain_main_authCode_icon>img {
	height: 40rpx;
}
.editPhone_contain_main_authCode_button {
	height: 88rpx;
	line-height: 88rpx;
	width: 190rpx;
	text-align: center;
	background-color: #2A7CF7;
	color: #fff;
	font-size: 24rpx;
	border-radius: 44rpx;
}
/* 验证码区域结束 */
/* 提交按钮区域开始 */
.editPhone_contain_main_submint {
	padding: 50rpx 0 80rpx;
}
.editPhone_contain_main_submint_button {
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background-color: #0662E6;
	text-align: center;
	color: #fff;
	border-radius: 40rpx;
	margin: auto;
	font-size: 28rpx
}
/* 提交按钮区域结束 */
/* 主体信息区域结束 */
</style>